<template>
	<div>
		<div class="breadcrumb">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>{{$store.state.company.companyName}}</el-breadcrumb-item>
				<el-breadcrumb-item>智能装备</el-breadcrumb-item>
				<el-breadcrumb-item>数字基地</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		
		<div class="tableNavBox">
			<div class="menberConTitle flex" style="justify-content: space-between;">
				<div class="tableTitle">数字基地</div>
			</div>
			<el-tabs v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="电子围栏" name="first">
					<digitalBaseElectronic></digitalBaseElectronic>
				</el-tab-pane>
				<el-tab-pane label="三维建模" name="second">
					<threeDmodeling :key="threeDmodeKey"></threeDmodeling>
				</el-tab-pane>
				<el-tab-pane label="数字装备" name="third">
					<digitalEquipment></digitalEquipment>
				</el-tab-pane>
				<el-tab-pane label="图像设备" name="fourth">
					<imageEquip></imageEquip>
				</el-tab-pane>
				<el-tab-pane label="物联网模块" name="last">
					<internetOfThings></internetOfThings>
				</el-tab-pane>
			</el-tabs>


			<!-- <div class="tableBoxTable" style="margin-bottom: 50px;">
				<serviceList></serviceList>
			</div> -->
			<!-- <div v-show="detailsIsShow">
				<div class="menberConTitle">
					<div class="tableTitle">任务详细列表</div>
				</div>
				<div class="tableBoxTable">
					<serviceConfig></serviceConfig>
				</div>
			</div> -->

		</div>
	</div>
</template>

<script>
import digitalBaseElectronic from './components/digitalBaseElectronic.vue'
import threeDmodeling from './components/threeDmodeling.vue'
import digitalEquipment from './components/digitalEquipment.vue'
import imageEquip from './components/imageEquip.vue'
import internetOfThings from './components/internetOfThings'
	export default {
		components: {
			digitalBaseElectronic,
			threeDmodeling,
			internetOfThings,
			digitalEquipment,
			imageEquip
		},
		data() {
			return {
				activeName: 'first',
				companyId: '',
				companyName: this.$store.state.company.companyName,
				userId: '',
				tableData: [{}],
				detailsIsShow: true,
				threeDmodeKey: new Date().getTime()
			}
		},
		created() {
			this.$store.commit('industrialis_leftNavIndex', 21)
		},
		mounted() {
			// this.$store.commit('set_teamNavIndex', 212)
			let store = this.$store.state.user
			this.userId = store.userInfo.id

			this.companyId = this.$store.state.company.selectCompanyId ?
				this.$store.state.company.selectCompanyId : this.$store.state.company.companyId

		},
		watch: {


		},
		methods: {
			handleClick(e){
				this.threeDmodeKey = new Date().getTime()
			}
		}
	}
</script>

<style scoped="scoped">
	.breadcrumb,
	.tableNavBox {
		padding: 20px;
	}

	.tableNavBox {
		padding-top: 0;
	}

	.tableTitle {
		font-size: 16px;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 30px;
	}

	.menberConTitle {
		width: 100%;
		background: #F3F3F3;
		text-align: left;
		padding: 5px 20px;
		margin-bottom: 20px;
		margin-top: 10px;
	}

	.dialogVisible>>>.el-input__inner {
		width: 270px;
	}
</style>
